<style type="text/css">
	/* .container .content li{
		display: none;
	}
	.current{
		display: block!important;
	} */
</style>
<!-- 导航栏 -->
  <div class="tabs is-boxed">
	<ul></ul>
  </div>
  
  <!-- 对应内容 -->
  <div class="container">
  	<ul class="content" id=content"></ul>
  </div>
  
  <script src="public/ydc_data.js" type="text/javascript"></script>
  <script type="text/javascript">
  $(document).ready(function(){
	  var Arr; //获取导航栏名称数据
	  var tabsContent;  //导航栏对应内容
	  if(navName_url == 'index'){
	  	  Arr = home_tabs;
		  tabsContent = 'IndexContent';
		  $('.content').load('IndexContent_ydc.html')
	  }else if(navName_url == 'bulma_ydc'){
	  	  Arr = bulma_tabs;
		  tabsContent = 'bulmaContent';
		  $('.content').load('bulmaContent_ydc.html')
	  }else{
	  	  Arr = icon_tabs;
		  tabsContent = 'IconContent';
		  $('.content').load('IconContent_ydc.html')
	  }
	  // 添加tabs的li>a页面
	  for(let i=0;i<Arr.length;i++){
		  //定义描点，方便跳转
	  	  $('.tabs ul').append(`<li><a href="#`+tabsContent + i +`">`+ Arr[i] +`</a></li>`);
	  }
	  $('.tabs ul li').eq(0).addClass('is-active');//默认显示导航栏第一个
	  
	  
	  
	  // for(let i=0;i<Arr.length;i++){
		 //  // 添加content>li内容：
		 //  // $('#content').append(`<li>`+Arr[i]+`</li>`);
	  // 	  $('.content').append(`<li id="`+ tabsContent + i+`"></li>`);
		  
		 //  // 添加content>li内容放到页面上去：
		 //  $('.content li').eq(i).append(tabsContent+i);
		  
	  // }
	  // $('.content li').eq(0).addClass('current');//默认显示导航栏第一个内容
	  
	  
	  
	// tabs>li点击事件：添加类名
	  $('.tabs ul li').bind('click',function(){
		var index = $(this).index();
		// console.log(index);
		
		// 添加is-active类名
		$('.tabs ul li').removeClass('is-active').eq(index).addClass('is-active');
		// $('.content li').removeClass('current').eq(index).addClass('current');
		
	  });
  })
	
  </script>